<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_customer_pc">
        <title>火堆</title>       
        <link rel="stylesheet" type="text/css" href="/scfire/css_pc/case.css" />
    	<link rel="stylesheet" type="text/css" href="/scfire/css_pc/item.css" />
    </head>

<body>
    <section class="">
        <div class="banner style1 bg1 fix-header" style="background-image: url(../img_pc/bg-banner-1.jpg)">
            <div class="container">
                <h1>一个有温度的教育公益平台</h1>
                <div class="txt">真实的故事，平凡的人物
                    <br> 他们用行动带来世间最温暖的力量
                </div>
            </div>
        </div>
        <div class="content">
            <div class="nav style1">
                <ul>
                <g:each in="${cates}" var="cate" status="i">
                <g:if test="${i==0}">
                	<li class="active"><a href="">${cate.name}</a></li>
                </g:if>
                <g:else>
                	<li><a href="">${cate.name}</a></li>
                </g:else>
                </g:each>
                </ul>
            </div>
            <div class="body">
                <div class="container">
                	<ul class="nav-content">
                	<g:each in="${cates}" var="cate" status="i">
                	<g:if test="${i==0}">
                	<li class="active">
	                	<ul class="list news">
	                		 <g:each in="${cate.articlepces}" var="article" status="k">
	                		 <g:if test="${k < 20}">
	                         <li class="list-item" onclick="showArticle(${article.id});">
	                            <div class="head">
	                                <div class="time"><g:formatDate format="yyyy-MM-dd HH:mm" date="${article.date}"/></div>
	                                <div class="title">${article.title}</div>
	                            </div>
	                            <div class="right">
	                                <div class="img" style="background-image:url('/scfire/project/imgRead?img=${article.img}')"></div>
	                            </div>
	                            <div class="left">
	                                <div class="txt">${article.description}</div>
	                            </div>
	                        </li>
	                        </g:if>
	                        </g:each>

	                    </ul>
	                </li>
                	</g:if>
	                <g:else>
	                	<li>
		                	<ul class="list news">
		                		 <g:each in="${cate.articlepces}" var="article" status="j">
		                		 <g:if test="${j < 20}">
		                         <li class="list-item" onclick="showArticle(${article.id});">
		                            <div class="head">
		                                <div class="time"><g:formatDate format="yyyy-MM-dd HH:mm" date="${article.date}"/></div>
		                                <div class="title">${article.title}</div>
		                            </div>
		                            <div class="right">
		                                <div class="img" style="background-image:url('/scfire/project/imgRead?img=${article.img}')"></div>
		                            </div>
		                            <div class="left">
		                                <div class="txt">${article.description}</div>
		                            </div>
		                        </li>
		                        </g:if>
		                        </g:each>

		                    </ul>
	                	</li>
	                </g:else>
                	</g:each>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <script>
    var offset = new Array(0,0,0,0,0,0);
    var requestSize = 20;
    var endFlag =new Array(false,false,false,false,false,false);
    var currentIndex = 0;
    var channelIds =new Array(0,0,0,0,0,0);
    $(function() {

    	<g:each in="${cates}" var ="cate" status="i">
    	channelIds[${i}] = ${cate.id};
    	</g:each>
    	
        $(function() {
            $('.nav ul li a').click(function(e) {
                e.preventDefault();
            })
            $('.nav ul li').click(function(e) {
                $(this).addClass('active').siblings('.active').removeClass('active');
                $('.nav-content>li').eq($(this).index()).addClass('active').siblings('.active').removeClass('active');
            })


            $(window).bind('scroll',function(){show()});  
		  
		    function show()  
		    {  
		  
		        if($(window).scrollTop()+$(window).height()>=$(document).height())  
		        {  
		            ajaxRead(currentIndex, channelIds[currentIndex]);  
		        }  
		    }
        })
        

    })
    
    function addView(channelId, targetIndex){
    	offset[targetIndex] +=requestSize
    	var more=''

    	console.log(offset[targetIndex]+":"+targetIndex)
    	if(endFlag[targetIndex]){
        	return;
        }
    	$.ajax({  
            type:'get',  
            dataType:'json',
            url:'/scfire/index/ArticleList?format=json&offset='+ offset[targetIndex]+'&channelId='+channelId,  		           
            beforeSend:function(){console.log('Loading...');$('li[index='+targetIndex+'] ul .btn-container .btn').html('加载中...');},  
            success:function(data){
              
	          if(data.length < requestSize){
	        	  offset[targetIndex] -=requestSize
	        	  endFlag[targetIndex] = true
	          }
	          var html = ''
          	  $.each(data,function(i,item){

          		
          		//console.log(item)
          		html+="<li class='list-item' onclick='showArticle("+notNullParse(item.id)+");'>"
          		html+="<div class='head'>"
       			html+="<div class='time'>"+notNullParse(item.date)+"</div>"
       			html+="<div class='title'>"+notNullParse(item.title)+"</div>"
          		html+="</div>"

      			html+="<div class='right'>"
       			html+="<div class='img' style='background-image:url("+item.img+")'></div>"
           		html+="</div>"

       			html+="<div class='left'>"
       			html+="<div class='txt'>"+notNullParse(item.description)+"</div>"
           		html+="</div></li>"
          
          	  });

	          more = "<li>"+$('li[index='+targetIndex+'] ul .btn-container').parent().html()+"</li>";
	          $('li[index='+targetIndex+'] ul .btn-container').parent().remove();
              $('li[index='+targetIndex+'] ul').append(html);
              //$('li[index='+targetIndex+'] ul').append(more);
              //$('li[index='+targetIndex+'] ul .btn-container .btn').html('查看更多');
             // if(endFlag[targetIndex]){
            	//$('li[index='+targetIndex+'] ul .btn-container .btn').click(function (){});
	            //$('li[index='+targetIndex+'] ul .btn-container .btn').html('已经到底了');
              //} 
            },  
            complete:function(){console.log('mission complete.')} ,
            error:function(data){
          	  //$("li[index='+targetIndex+'] ul .btn-container .btn").html('已经到底了');
            }
           
      });  
    }

    function notNullParse(str){
        if(str == null){
            return ''
        }
        else{
            return str
        }
    }
    
    function showArticle(id){
    	window.location.href='/scfire/ArticlePc/showArticle?articleid='+id;
    }
    </script>
</body>

</html>
